<template>
	<el-form ref="formRef" :model="formData" label-width="150px" :rules="rules" v-loading="loading">
		<el-form-item label="图标：" prop="web_logo">
			<div class="w-80">
				<imageUpload v-model="formData.icon" promptText="建议尺寸：200*200" :limit="1" />
			</div>
		</el-form-item>
		<el-form-item label="应用APPID：" prop="app_id">
			<div class="w-80">
				<el-input v-model.trim="formData.app_id" placeholder="请输入应用APPID" />
				<div class="el-form-tips">创建应用后获取APPID</div>
			</div>
		</el-form-item>
		<el-form-item label="商户应用私钥：" prop="app_secret_cert">
			<div class="w-[460px]">
				<el-input v-model="formData.app_secret_cert" placeholder="请输入商户应用私钥" type="textarea"
					:autosize="{ minRows: 6, maxRows: 4 }" show-word-limit clearable></el-input>
				<div class="el-form-tips">生成商户应用私钥并粘贴内容至此处</div>
			</div>
		</el-form-item>
		<el-form-item label="应用公钥证书：" prop="app_public_cert_path">
			<div class="w-[460px]">
				<el-input v-model="formData.app_public_cert_path" placeholder="请输入应用公钥证书" type="textarea"
					:autosize="{ minRows: 6, maxRows: 4 }" show-word-limit clearable></el-input>
				<div class="el-form-tips">下载应用公钥证书并粘贴内容至此处</div>
			</div>
		</el-form-item>

		<el-form-item label="支付宝公钥证书：" prop="alipay_public_cert_path">
			<div class="w-[460px]">
				<el-input v-model="formData.alipay_public_cert_path" placeholder="请输入支付宝公钥证书" type="textarea"
					:autosize="{ minRows: 6, maxRows: 4 }" show-word-limit clearable></el-input>
				<div class="el-form-tips">下载支付宝公钥证书并粘贴内容至此处</div>
			</div>
		</el-form-item>
		<el-form-item label="支付宝根证书：" prop="alipay_root_cert_path">
			<div class="w-[460px]">
				<el-input v-model="formData.alipay_root_cert_path" placeholder="请输入支付宝根证书" type="textarea"
					:autosize="{ minRows: 6, maxRows: 4 }" show-word-limit clearable></el-input>
				<div class="el-form-tips">下载支付宝根证书并粘贴内容至此处</div>
			</div>
		</el-form-item>
		<el-form-item label="状态：">
			<div>
				<el-radio-group v-model="formData.status">
					<el-radio :label="1">开启</el-radio>
					<el-radio :label="0">关闭</el-radio>
				</el-radio-group>
				<div class="el-form-tips">请选择微信支付开启或关闭，关闭时用户端不显示</div>
			</div>
		</el-form-item>
	</el-form>
	<footerSubmit>
		<el-button v-auth="'setting/pay/edit'" type="primary" @click="handleSubmit">保存</el-button>
	</footerSubmit>
</template>

<script lang="ts" setup name="payAlipayEdit">
import { ref, reactive, onMounted } from 'vue';
import { payDetail, payEdit } from '/@/api/setting/pay';
import { messageSuccess } from '/@/utils/message';

const formRef = ref(null);

const loading = ref(true);

const identify = 'alipay';

// 表单数据
const formData = reactive({
	identify: identify,
	icon: '',
	app_id: '',
	app_secret_cert: '',
	app_public_cert_path: '',
	alipay_public_cert_path: '',
	alipay_root_cert_path: '',
	status: '',
});

// 验证规则
const rules = reactive({
	app_id: [{ required: true, message: '请输入应用APPID', trigger: ['blur'] }],
	app_secret_cert: [{ required: true, message: '请输入商户应用私钥', trigger: ['blur'] }],
	app_public_cert_path: [{ required: true, message: '请输入应用公钥证书', trigger: ['blur'] }],
	alipay_public_cert_path: [{ required: true, message: '请输入支付宝公钥证书', trigger: ['blur'] }],
	alipay_root_cert_path: [{ required: true, message: '请输入支付宝根证书', trigger: ['blur'] }],
});

// 获取数据
const getData = async () => {
	const data = await payDetail({ identify: identify });

	for (const key in formData) {
		if (data[key] != null && data[key] != undefined) {
			formData[key] = data[key];
		}
	}

	const params = data.params;

	for (const key in formData) {
		if (params[key] != null && params[key] != undefined) {
			formData[key] = params[key];
		}
	}

	loading.value = false;
};

// 保存提交
const handleSubmit = async () => {
	await formRef.value?.validate(async (valid: boolean) => {
		if (!valid) return;
		await payEdit(formData);
		messageSuccess('设置成功');
		getData();
	});
};

onMounted(() => {
	getData();
});
</script>
